<template>
  <u-popup :show="showKb" @close="closeKb" @open="openKb" :closeable="true">
    <view
      class="layout"
      style="
        background-color: rgb(255, 255, 255);
        font-size: 14px;
        width: 100vw;
      "
    >
      <!-- 显示屏 -->
      <view class="screen">
        <view
          class="th"
          style="
            width: 100vw;
            height: 124rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36rpx;
            font-weight: bold;
          "
        >
          <slot name="li" />
        </view>
        <view
          class="kk"
          style="
            height: 111rpx;
            margin: 0 30rpx;
            border: 1px solid #e8e8e8;
            border-radius: 10rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 25rpx;
          "
        >
          <view style="font-weight: 500; font-size: 22rpx; color: #999999"
            >{{ screenTxt
            }}<text
              style="
                font-weight: bold;
                font-size: 80rpx;
                color: #edae33;
                margin-left: 5rpx;
              "
              >{{ num }}</text
            ></view
          >
        </view>
        <view class="ot" style="height: 30rpx"></view>
      </view>
      <!-- 输入框 start -->
      <view
        class="kebo"
        style="width: 100vw"
        :class="{
          isd: isX,
          nod: !isX,
        }"
      >
        <view style="grid-area: a" class="table-cell" @click="onNumClick(1)"
          >1</view
        >
        <view style="grid-area: b" class="table-cell" @click="onNumClick(2)"
          >2</view
        >
        <view style="grid-area: c" class="table-cell" @click="onNumClick(3)"
          >3</view
        >
        <view style="grid-area: d" class="table-cell" @click="onNumClick(4)"
          >4</view
        >
        <view style="grid-area: e" class="table-cell" @click="onNumClick(5)"
          >5</view
        >
        <view style="grid-area: f" class="table-cell" @click="onNumClick(6)"
          >6</view
        >
        <view style="grid-area: g" class="table-cell" @click="onNumClick(7)"
          >7</view
        >
        <view style="grid-area: h" class="table-cell" @click="onNumClick(8)"
          >8</view
        >
        <view style="grid-area: i" class="table-cell" @click="onNumClick(9)"
          >9</view
        >
        <view
          style="grid-area: o; border-bottom: 1rpx solid #fff"
          class="table-cell"
          @click="onNumClick(0)"
          >0</view
        >
        <view
          v-if="isd"
          style="grid-area: l; border-bottom: 1rpx solid #fff"
          class="table-cell"
          @click="onDotClick"
          >.</view
        >

        <view style="grid-area: j" class="table-cell" v-on:click="onDelClick">
          <u-icon name="backspace" size="26"> </u-icon>
        </view>
        <view
          style="
            grid-area: k;
            background: linear-gradient(34deg, #f3c45d, #edac2f);
            border-right: 1rpx solid #edac2f;
            border-bottom: 1rpx solid #edac2f;
          "
          class="table-cell"
          @click="onKtClick"
          >{{ confirmTxt }}</view
        >
      </view>
      <!-- 输入框 end  -->
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
  props: {
    screenTxt: {
      default: "请输入就餐人数:",
      type: String,
    },
    confirmTxt: {
      default: "确定:",
      type: String,
    },
    isX: {
      default: false,
      type: Boolean,
    },
    showKb: {
      default: false,
      type: Boolean,
    },
  },
  methods: {
    onNumClick(i) {
      let old = this.num;
      this.num = parseInt(this.num + "" + i);
      if (this.num > 999) {
        this.num = old;
      }
    },

    onDelClick() {
      this.num = parseInt(
        (this.num + "").substring(0, (this.num + "").length - 1) || 0
      );
    },
    onDotClick() {
      this.num = parseInt(
        (this.num + "").substring(0, (this.num + "").length - 1) || 0
      );
    },

    async onKtClick() {
      this.$emit("confirm", {
        num: this.num,
      });
    },
    closeKb() {
      this.$emit("closeKb", {
        num: this.num,
      });
    },
    openKb() {
      this.$emit("openKb", {
        num: this.num,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.kebo {
  display: grid;
  grid-template-columns: 187rpx 187rpx 187rpx 1fr;
  grid-template-rows: 106rpx 106rpx 106rpx 167rpx;

  .table-cell {
    border: #f3f3f3 0.5rpx solid;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    // font-weight: 500;
    color: #111111;
    font-size: 36rpx;
  }
}

.isd {
  grid-template-areas:
    "a b c j"
    "d e f j"
    "g h i k"
    "o o l k";
}
.nod {
  grid-template-areas:
    "a b c j"
    "d e f j"
    "g h i k"
    "o o o k";
}
</style>
